<template>
	<m-layout class="order" title="我的设备" gap="0 24">
		<!-- tab -->
		<!-- 	<m-tab slot="header" align="flex" justify="space-between" color="#333" v-model="state" @onChange="reset"
			:list="tabList" gap="10 0">
		</m-tab> -->
		<!-- 列表 -->
		<m-block bgColor="unset">
			<m-block class="li" gap="24 30 0" spa="20 0 0" v-for="(item,index) in listArr" :key="index">
				<view class="">
					<view class="border-bottom pb-16">
						<!-- <view class="status flex-between mb-16">
							<text>订单：{{item.ordercode}}</text>
							<text :class="stateClass[item.state]">{{orderState[item.state]}}</text>
						</view> -->
						<!-- 商品 详情 -->
						<view class="goods-card flex-between">
							<view class="left">
								<m-image size="124" :src="item.picurl" radius="10" />
							</view>
							<view class="center flex-column">
								<view class="title otp2 fw-600">
									<text>{{item.gname}}</text>
								</view>
								<text class="fs24 mtb-12">托管地区：{{item.attrName}}</text>
								<text class="fs24">数量：{{item.buycount}}</text>
							</view>
							<view class="right">
								<view class="flex-column">
									<text class="fs24" :class="stateClass[item.state]">{{orderState[item.state]}}</text>
									<!-- <m-price :value="item.price" :size="[27,18]" color="#333"></m-price> -->
								</view>
							</view>
						</view>
					</view>
					<view class="flex-between mtb-16 pb-16 border-bottom after">
						<view class="flex-column flex-1">
							<text class="fs24">产品总价</text>
							<view class="">
								<m-price v-if="item.totalamount" :value="item.totalamount" :size="[32,18]"
									color="#333" />
							</view>
						</view>
						<view class="flex-column flex-1 pl-60"
							@click="Jump(`/pages/mine/myDevice/deviceReward?ordercode=${item.ordercode}&Credittype=${item.wards==1?5:20}`)">
							<text class="fs24 flex">
								累计收益
								<m-icon size="24" color="#888" type="icon-qianjin" />
							</text>
							<view class="">
								<m-price v-if="item.totalamount" :value="item.incomTotal" :size="[32,18]"
									color="#333" />
							</view>
						</view>
					</view>
					<m-block bg-color="#F7F7F7" gap="16 24" radius="10">
						<view class="flex-between ptb-4 fs24">
							<text class="text-grey">建设周期</text>
							<view class="flex">
								<text class="text-grey fw-600">{{item.installDays}} 天</text>
							</view>
						</view>
						<view class="flex-between ptb-4 fs24">
							<text class="text-grey">托管时间</text>
							<view class="flex ">
								<text class="text-grey fw-600">{{item.sendtime.replace("T"," ")}}</text>
							</view>
						</view>
						<view class="flex-between ptb-4 fs24">
							<text class="text-grey">收益时间</text>
							<view class="flex ">
								<text class="text-grey fw-600">{{item.dealtime.replace("T"," ")}}</text>
							</view>
						</view>
					</m-block>
					<view class="flex-between mt-20 mb-24">
						<view class="flex fs24">
							<m-icon size="32" color="#888" type="icon-dingdan" />
							<text class="text-grey fw-600">{{item.ordercode}}</text>
						</view>
						<view class="flex" @click="Jump('/pages/order/details/details?orderId='+item.id)">
							<text class="fs24">详情</text>
							<m-icon size="24" color="#888" type="icon-qianjin" />
						</view>

					</view>
					<!-- 操作 -->
					<view class="flex jc-flex-start mt-24 mb-24">
						<!-- <m-button type="hollow" class="ml-12 fs22" size="small"
							@click="Jump('/pages/order/details/details?orderId='+item.id)">订单详情</m-button> -->
						<m-button v-if="item.contractInfo" class="ml-12 fs22" size="small"
							@click="signOpen(item)">电子合同</m-button>
					</view>
				</view>
			</m-block>
			<m-loading :list='listArr' title="未查询到设置" :pageIndex="pageIndex" :pageCount="pageCount"
				:loading="isLoading" />
		</m-block>
		<uni-popup ref="popup" type="bottom" >
			<m-block class="flex-column" bgColor="#fff" radius="20 20 0 0" gap="24">
				<view class="flex-between fs26 fw-600 pb-24">
					<text>电子合同</text>
					<text @click="signClose">关闭</text>
				</view>
				<view class="flex-column ContractDetail ptb-24" v-if="itemOrder.contractInfo">
					<view class="flex jc-center">
						<!-- <image style="width: 338rpx;height: 98rpx;" src="../../../static/images/pages/soulu.png"
							mode=""></image> -->
					</view>
					<text class="ta-center fs48 mt-24">共享设备 销售托管合同</text>
					<view class="flex-column pt-100">
						<text class="ta-center fs34 fw-600">
							<template v-if="itemOrder.wards==1">“搜鹭”共享打印机销售托管合同</template>
							<template v-if="itemOrder.wards==3">“搜鹭”共享AI自助美食机销售托管合同</template>
						</text>
						<view class="fs24 flex-column mt-24">
							<text>甲方：搜鹭（北京）科技有限公司</text>
							<text class="mt-20">乙方：</text>
							<view class="flex ai-flex-end">
								<text class="  text-red">统一社会信用代码/<br />身份证号码：</text>
								<view class="input01 flex-1">
									<text class="fs28">{{itemOrder.contractInfo.idCard}}</text>
								</view>
							</view>
							<template  v-if="itemOrder.wards==1">
								<text class="mt-48">甲乙双方秉承平等、自愿、双赢原则，经充分协商，双方就开展“搜鹭共享自助设备”合作联营，共同开拓搜鹭的共享自助设备市场，成就双方事业的繁荣和发展，达成如下协议，双方遵照执行：</text>
							</template>
							<template v-if="itemOrder.wards==3">
								<text class="mt-48">甲乙双方秉承平等、自愿、双赢原则，经充分协商，双方就开展“搜鹭共享自助AI美食机”合作联营，共同开拓搜鹭共享自助AI美食机市场，成就双方事业的繁荣和发展，达成如下协议，双方遵照执行：</text>
							</template>
							<view class="flex-column mt-36">
								<text class="text-red">一、产品名称、配置规格、数量(提货或托管自动生成数量和金额）</text>
								<view class="flex fs21 border-t border-r mt-24">
									<text class="border-l ta-center ptb-8 text-red"
										style="width: 160rpx;min-height: 40rpx; box-sizing: border-box;">产品名称</text>
									<text class="border-l ta-center ptb-8 text-red"
										style="width: 160rpx;min-height: 40rpx; box-sizing: border-box;">配置</text>
									<text class="border-l ta-center ptb-8 text-red"
										style="width: 160rpx;min-height: 40rpx; box-sizing: border-box;">单位(台)</text>
									<text class="border-l ta-center ptb-8 text-red"
										style="width: 100rpx;min-height: 40rpx; box-sizing: border-box;">数量</text>
									<text class="border-l ta-center ptb-8 text-red"
										style="width: 160rpx;min-height: 40rpx; box-sizing: border-box;">单价(元)</text>
									<text class="border-l ta-center ptb-8 text-red"
										style="width: 160rpx;min-height: 40rpx; box-sizing: border-box;">总金额(元)</text>
								</view>
								<view class="flex fs21 border-t border-r" style="align-items: normal;">
									<text class="border-l ta-center ptb-8 flex ai-center jc-center"
										style="width: 160rpx;min-height: 40rpx; box-sizing: border-box;">{{itemOrder.gname}}</text>
									<text class="border-l ta-center ptb-8 flex ai-center jc-center"
										style="width: 160rpx;min-height: 40rpx; box-sizing: border-box;">{{itemOrder.attrName}}</text>
									<text class="border-l ta-center ptb-8 flex ai-center jc-center"
										style="width: 160rpx;min-height: 40rpx; box-sizing: border-box;">1</text>
									<text class="border-l ta-center ptb-8 flex ai-center jc-center"
										style="width: 100rpx;min-height: 40rpx; box-sizing: border-box;">{{itemOrder.buycount}}</text>
									<text class="border-l ta-center ptb-8 flex ai-center jc-center"
										style="width: 160rpx;min-height: 40rpx; box-sizing: border-box;">{{itemOrder.price}}</text>
									<text class="border-l ta-center ptb-8 flex ai-center jc-center"
										style="width: 160rpx;min-height: 40rpx; box-sizing: border-box;">{{itemOrder.buycount*itemOrder.price}}</text>
								</view>
								<view class="flex fs21 border-t border-r border-b">
									<text class="border-l ta-center ptb-8 text-red"
										style="width: 376rpx;height: 40rpx; box-sizing: border-box;">合计人民币金额(大写)</text>
									<text class="border-l ta-center ptb-8"
										style="flex:1;height: 40rpx; box-sizing: border-box;">{{changeToChinese(itemOrder.buycount*itemOrder.price)}}</text>
								</view>
							</view>
							<view class="flex-column mt-36">
								<text>二、产品概况</text>
								<view class="mt-12" style="text-indent: 1rem;">
									<template
										v-if="itemOrder.wards==1">甲方是“搜鹭共享自助打印机”智能终端设备研发与生产方，通过向学校、医院、社区等场景提供“搜鹭自助打印”智能终端设备，助力智慧校园、智慧医院、智慧政务等建设。设备通过微信小程序驱动共享自助文印设备，实现身份证读取打印，文档的黑白、彩色打印、复印，6寸生活照及各尺寸证件照制作等服务，投放的自助文印设备全天24小时工作，为文印刚需场景的学习办公活动提供便捷，获得了广泛的好评；同时设备屏幕广告可拓展增值服务收益。</template>
									<template
										v-if="itemOrder.wards==3">甲方是“搜鹭共享自助AI美食机”智能终端设备研发与生产方，通过向学校、医院、政务大厅、社区、商场等场景提供“搜鹭共享自助AI美食机”智能终端设备，助力智慧校园、智慧医院、智慧政务等建设。设备通过微信小程序驱动共享自助售饭设备，实现食品即时零售，食品即时加热等服务，投放的自助售饭设备全天24小时工作，为餐饮刚需场景提供便捷服务，获得了广泛的好评。乙方向甲方采购共享自助AI美食机（硬件+软件），并可选择托管给甲方运营，双方按约定分配运营收益。</template>
								</view>
							</view>
							<view class="flex-column mt-36">
								<text>三、费用承担与利益分享</text>
								<view class="mt-12" style="text-indent: 1rem;">
									（一）如需发货，交货方式和运费负担：快递或物流，运费由甲方承担 。
								</view>
								<view class="mt-12" style="text-indent: 1rem;">
									（二）结算方式：先打款后发货。
								</view>
								<view class="mt-12 flex text-red">
									<text style="text-indent: 1rem;">（三）模式选择：</text>
									<view class="flex ">
										<view class="flex mr-24 ai-center">
											<m-icon
												:type="itemOrder.contractInfo.cType==1?'icon-xuanzhong':'icon-fuxuanxiangweixuanzhong'"
												size="34" spa="0 0 0 0"
												:color="itemOrder.contractInfo.cType==1?'text-red':''" />
											<text class="ml-8">模式一</text>
										</view>
										<view class="flex ai-center">
											<m-icon
												:type="itemOrder.contractInfo.cType==2?'icon-xuanzhong':'icon-fuxuanxiangweixuanzhong'"
												size="34" spa="0 0 0 0"
												:color="itemOrder.contractInfo.cType==2?'text-red':''" />
											<text class="ml-8">模式二</text>
										</view>
									</view>
								</view>
								<template v-if="itemOrder.wards==1">
									<view class="mt-24">
										<text class="fw-600 ws-nowrap">1.模式一：</text>
										设备的物权归乙方所有，设备落地及场地费用由乙方付费，甲方提供帮助，设备维护由乙方负责，但运营必须使用甲方软件，接受统一管理，合作期间甲方免费提供给乙方三年软件使用权，并赠送首柜供应链）：超过三年后继续使用甲方软件的，甲方按运营期间总流水计提3%作为软件服务费。
									</view>
									<view class="mt-12">
										<text class="fw-600 ws-nowrap">2.模式二：</text>
										统筹区域管理，乙方全权将设备托管给甲方，托管周期为2年，备注：乙方购买金额软件服务费占比70%，硬件占比30%。托管期间甲方不再另行收软件服务费，打印设备的物权归乙方所有。此模式下经营风险由双方共同承担，甲方统一对设备进行运营管理及提供打印机耗材，设备维护及场地。乙方享受托管期间收益，收益比例为：选定区域内所有同类运营设备平均单台月收益35
										%×托管台数，收益起始日期为合同生效的次日起 7-20 个工作日（ 7- 20
										天为试运营期不计入收益）。乙方需取消托管的，需提前60个工作日书面通知甲方（托管模式取消，合作模式自动变更为模式一，甲方将设备撤出托管场地发送到乙方指定位置，运费由乙方负责，撤机期间的运营损失由乙方自行承担）。自乙方提交合作方式变更申请之日起，乙方的托管收益终止。乙方收益满60天的不得取消托管合作。乙方要求取消托管的视为乙方违约，甲方可终止本协议，一切损失由乙方承担。
									</view>
								</template>
								<template v-if="itemOrder.wards==3">
									<view class="mt-24">
										<text class="fw-600 ws-nowrap">1.模式一：</text>
										设备的物权归乙方所有，设备落地及场地费用由乙方付费，甲方提供帮助，设备维护由乙方负责，但运营需要使用甲方软件“人工智能AI美食机软件平台”，需接受统一管理。合作期间甲方免费提供给乙方三年软件使用权，并赠送首柜供应链，超过三年后继续使用甲方软件“人工智能AI美食机软件平台”，应按照每台设备月收益的10%向甲方按月支付运营服务费。
									</view>
									<view class="mt-12">
										<text class="fw-600 ws-nowrap">2.模式二：</text>
										1.甲方负责铺设共享自助AI美食机统筹区域管理运营，乙方全权将设备托管给甲方，托管周期为3年（乙方支付完毕货款之日，共享自助AI美食机设备的所有权归乙方所有。注：货款金额的软件服务费占比为72%，硬件设备费用占比为28%），甲方收到乙方托管签收单并开通“人工智能AI美食机软件平台”账号交付乙方后，双方均需按本协议约定认真履约。<br />
										2.托管期间甲方免收运营服务费。由甲方统一对设备进行运营管理及提供AI美食机食材，设备维护及场地等。乙方享受托管期间收益，收益比例为：选定区域内（由甲方指定）所有同类运营设备平均单台月收益35 %×托管台数，收益起始日期为合同生效的次日起 28-35个工作日（ 28- 35 天为试运营期不计入收益），剩余收益归甲方。乙方收益满60天不得取消托管合作，否则视为乙方违约，甲方可终止本协议，一切损失由乙方承担。
									</view>
								</template>
							</view>
							<view class="flex-column mt-36">
								<text>四、甲方权利义务</text>
								<view class="mt-12" style="text-indent: 1rem;">
									<template v-if="itemOrder.wards==1">（一）自营或联营托管资源点的“搜鹭共享自助打印机”由甲方统一软件自动化运营管理。</template>
									<template v-if="itemOrder.wards==3">（一）自营或联营托管资源点的“搜鹭共享AI自助美食机”由甲方统一软件自动化运营管理。</template>
								</view>
								<view class="mt-12" style="text-indent: 1rem;">
									<template v-if="itemOrder.wards==1">（二）甲方不断研发和升级软件，使“搜鹭共享打印机”更便捷，更高效。</template>
									<template v-if="itemOrder.wards==3">（二）甲方不断研发和升级软件，使“搜鹭共享AI自助美食机”更便捷，更高效。</template>
								</view>
								<view class="mt-12" style="text-indent: 1rem;">
									（三）甲方新品或新政策上市/变更应提前通知乙方，甲方有义务及时为乙方提供与合作经营商相关的技术支持、信息及资料便于乙方开展推广及宣传工作。
								</view>
							</view>
							<view class="flex-column mt-36">
								<text>五、乙方权利义务</text>
								<view class="mt-12" style="text-indent: 1rem;">
									（一）在合同期限内，乙方基于联营托管点的推广、运营所需，有权在对外宣传推广时以区域联营商的名义统一使用甲方的名称、商标、标志、企业及产品信息等。
								</view>
								<view class="mt-12" style="text-indent: 1rem;">
									（二）乙方不得对联营托管终端的设备和软件进行任何改动。
								</view>
								<view class="mt-12" style="text-indent: 1rem;">
									（三）排他性合作：合作期间，乙方在本合同约定的区域内不得与甲方业务有竞争关系的第三方有同类合作。若发现乙方在本代理区域与其他方有同类合作的，
									乙方应支付违约金人民币10万元给甲方，若违约金不足以赔偿损失的，应每资源点应按最高收益的资源点的收益水平赔偿甲方合作期间的损失。
								</view>
								<view class="mt-12" style="text-indent: 1rem;">
									（四）未经甲方同意，乙方不得跨区域、跨渠道进行本项目合作且乙方不得在约定区域内进行第三方的品牌共享设备合作的推广。
								</view>
								<view class="mt-12" style="text-indent: 1rem;">
									（五）乙方不得就甲方所授权使用的商标、转授权他人使用，亦不得就甲方授权使用的标的物与其他企业合并或延伸使用；同时，乙方应积极维护甲方的品牌形象，不得做出有损甲方声誉和利益的宣传。
								</view>
								<view class="mt-12" style="text-indent: 1rem;">
									（六）未经甲方同意，乙方不得将区域合作权益转让给第三方。
								</view>
								<view class="mt-12" style="text-indent: 1rem;">
									（七）乙方获得的收益应自行承担相关税费。
								</view>
							</view>
							<view class="flex-column mt-36">
								<text>六、违约责任</text>
								<view class="mt-12" style="text-indent: 1rem;">
									（一）若一方违反上述本合同约定，且在收到守约方纠正通知后，仍未纠正，则守约方有权解除协议，且有权要求支付其因此受到的全部损失。
								</view>
								<view class="mt-12" style="text-indent: 1rem;">
									（二）上述赔偿责任，应当为赔偿对方的全部经济损失，包括直接损失和间接损失，包括但不限于因此发生的律师费用、诉讼、执行费用及其他所发生的费用（含追偿程序）等。
								</view>
								<view class="mt-12" style="text-indent: 1rem;">
									<template v-if="itemOrder.wards==1">（三）乙方不得对“搜鹭共享打印机”设备以及自带的软件、驱动、收款二维码等进行任何改动、更换。乙方违反本条的，属于严重违约，应向甲方支付违约金人民币10万元，若违约金不足以补偿合作期间给甲方造成的损失的，乙方仍应赔偿损失。甲方有权因此解除本合同。</template>
									<template v-if="itemOrder.wards==3">（三）乙方不得对“搜鹭共享AI自助美食机”设备以及自带的软件、驱动、收款二维码等进行任何改动、更换。乙方违反本条的，属于严重违约，应向甲方支付违约金人民币10万元，若违约金不足以补偿合作期间给甲方造成的损失的，乙方仍应赔偿损失。甲方有权因此解除本合同。</template>
								</view>
							</view>
							<view class="flex-column mt-36">
								<text>七、争议解决</text>
								<view class="mt-12" style="text-indent: 1rem;">
									因本合同引起的与本合同有关的任何争议，双方协商解决，协商不成的，任何一方均有权向甲方所在地有管辖权的人民法院提起诉讼解决。
								</view>
							</view>
							<view class="flex-column mt-36">
								<text>八、其他</text>
								<view class="mt-12" style="text-indent: 1rem;">
									<template v-if="itemOrder.wards==1">（一）本合同自双方签字、盖章之日起生效。2年合同期满，本协议项下双方权利义务即终止，双方有意继续合作的，需另行签订协议。</template>
									<template v-if="itemOrder.wards==3">（一）本合同自双方签字、盖章之日起生效。3年合同期满，本协议项下双方权利义务即终止，双方有意继续合作的，需另行签订协议。</template>
								</view>
								<view class="mt-12" style="text-indent: 1rem;">
									（二）本合同附件系本合同的重要组成部分，与本合同具有同等法律效力，如附件的相关条款与本合同存有歧义的，以附件中条款为准。
								</view>
								<view class="mt-12" style="text-indent: 1rem;">
									（三）本合同通过扫描件、传真件等方式往来的双方盖章版本的有效。
								</view>
								<view class="mt-12" style="text-indent: 1rem;">
									（四）本合同一式两份，双方各执一份，具同等法律效力。
								</view>
							</view>
							<view class="flex-column mt-36">
								<text>（以下为签署栏，无正文）</text>
								<text>-------------------------------------------------------------------------------------------</text>
							</view>
							<view class="mt-36 flex fs21 border-t border-l border-r border-b"
								style="align-items: normal;">
								<view class="flex-1 flex-column border-r  plr-20 pt-40 pb-60"
									style="position: relative;">
									<text>甲方（盖章）：</text>
									<text class="mtb-12">法定或授权代表：</text>
									<text>{{itemOrder.ctime.replace("T"," ")}}</text>
									<image
										style="width: 160rpx;height:160rpx; position: absolute; left: 100rpx;top: 10rpx;"
										src="../../../static/images/pages/zang.png" mode=""></image>
								</view>
								<view class="flex-1 flex-column text-red  plr-20 pt-40 pb-60"
									style="position: relative;">
									<view class="flex" @click="isShowSign=true">
										<text>乙方：(签名)</text>
										<image class="signImg" :src="itemOrder.contractInfo.cImg" mode=""></image>
									</view>
									<view class="flex mtb-12 ">
										<text class="ws-nowrap">电话：</text>
										<input type="text" class="fs24 text-black" disabled
											v-model="itemOrder.contractInfo.phone" />
									</view>
									<text class=" text-black">{{itemOrder.ctime.replace("T"," ")}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</m-block>
		</uni-popup>
	</m-layout>
</template>

<script>
	import { GetOrderPage, SignIn, SetAddr, CancellOrder } from '@/api/Order.js'
	export default {
		data() {
			return {
				wards:'',
				listLoading: false,
				state: 0,
				tabList: [
					'全部',
					'建设中',
					'已完成',
				],
				statusEnum: {
					0: '10,12,14',
					1: '12',
					2: '10',
				},
				listArr: [],
				pageIndex: 1,
				pageCount: 1,
				isLoading: false,

				signinInfo: {}, // 确认收货对象
				cancelItem: {}, // 取消订单对象
				cancelReasonNo: '', // 取消理由
				cencalShow: false, // 取消订单弹框
				receivingShow: false, // 确认收货弹框
				// add
				showTyep: 1,
				nuShow: false, //  运单号 弹框
				stateClass: {
					12: 'text-red',
					11: 'text-primary',
				},
				itemOrder: {}
			};
		},
		computed: {
			orderState() {
				const state = this.$store.state.general.enum;
				console.log('OrderState', state['OrderState']);
				return state['OrderState']
			},
		},
		onLoad({ state,wards }) {
			this.wards = wards || '1,3'
			this.state = Number(state) || 0;
			this.reset()
		},
		onShow() {
			// this.reset()
			// let that = this
			// uni.$on('updateData', function(data) {
			// 	console.log('监听到事件来自 updateData ，携带参数为：' + data);
			// 	if (data == 'order') {
			// 		that.reset()
			// 	}
			// })
		},
		methods: {
			signClose() {
				this.$refs.popup.close()
			},
			signOpen(item) {
				this.itemOrder = { ...item, contractInfo: JSON.parse(item.contractInfo) }
				this.$refs.popup.open()
			},
			// 修改地址
			async SetAddrFn() {
				this.Toast('暂未开放')
			},
			// 取消订单
			async CancellOrderFn() {
				if (!this.cancelReasonNo) {
					return this.Toast('请输入取消理由')
				}
				const { success, msg, data } = await CancellOrder({
					orderid: this.cancelItem.id,
					// cancelReasonNo: this.cancelReasonNo,
				})
				this.Toast(msg)
				if (success) {
					this.Toast('操作成功')
					this.cancelItem = {};
					this.cancelReasonNo = '';
					this.cencalShow = false;
					this.reset();
				}
			},
			// 签收
			async SignIn() {
				const { success, msg } = await SignIn({
					id: this.signinInfo['id']
				})
				this.Toast(msg)
				this.receivingShow = false;
				if (success) {
					this.signinInfo = {};
					this.reset();
				}
			},

			async reset() {
				this.listLoading = true;
				this.pageCount = 1;
				this.pageIndex = 1;
				this.listArr = [];
				await this.getData();
				this.listLoading = false;
			},
			async getData() {
				if (this.pageIndex > this.pageCount) {
					return
				}
				this.isLoading = true;
				const { success, list, pageCount } = await GetOrderPage({
					wards: this.wards,
					state: this.statusEnum[this.state],
					pageIndex: this.pageIndex,
				});
				this.isLoading = false;
				this.pageCount = pageCount;
				if (this.pageIndex <= 1) {
					this.listArr = list;
				} else {
					this.listArr = [...this.listArr, ...list];
				}
				this.pageIndex++;
				uni.stopPullDownRefresh();
			},
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh();
			this.reset();
		},
		onReachBottom() {
			this.getData();
			console.log("触底了");
		},
	}
</script>

<style lang="scss">
	.order {
		padding-bottom: 100rpx;

		::v-deep .small-tab {
			padding: 10rpx 24rpx;
			overflow-x: scroll;

			.tab-box {
				min-width: 100rpx;

				text {
					font-size: 28rpx !important;
				}
			}

			.tab-box:nth-of-type(1) {
				min-width: 72rpx;
			}

			.tab-box+.tab-box {
				margin-left: 15rpx;
			}
		}
	}

	.li {
		position: relative;

		.status {
			text:nth-of-type(1) {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			text:nth-of-type(2) {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: var(--theme);
			}
		}

		.goods-card {
			align-items: inherit;

			.left {}

			.center {
				flex: 1;
				overflow: hidden;
				padding: 0 30rpx;

				.title {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #333333;
				}
			}

			.right {
				text-align: right;
			}
		}

		.price {
			padding-top: 10rpx;

			text:nth-of-type(1) {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}

		.order-state {
			margin-top: 20rpx;
			background: #F6F6F6;
			border-radius: 10rpx;
			padding: 10rpx 30rpx;

			.state {
				padding: 0 15rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.otw {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}

		.btn-box {
			.m-button {
				margin-top: 25rpx;
				margin-left: 20rpx;
			}
		}
	}

	.cencal-pupop {
		input {
			flex: 1;
			margin-left: 10rpx;
			padding: 15rpx 35rpx;
			background: #F6F6F6;
			border-radius: 100px 100px 100px 100px;
			font-size: 32rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
		}

		.placeholder-class {
			font-size: 30rpx;
			color: #CCCCCC;
		}
	}

	.hint-pupop {
		text-align: center;
		padding: 24rpx;
	}

	.after {
		position: relative;
	}

	.after::after {
		position: absolute;
		content: '';
		width: 2rpx;
		height: 80%;
		background-color: #EEEEEE;
		left: 50%;
	}

	.ContractDetail {
		height: 1200rpx;
		overflow: auto;

		.input01 {
			margin-left: 12rpx;
			border-bottom: 1rpx solid #707070;

			input {
				font-size: 26rpx;
			}
		}
	}

	.border-t {
		border-top: 1rpx solid #707070;
	}

	.border-l {
		border-left: 1rpx solid #707070;
	}

	.border-r {
		border-right: 1rpx solid #707070;
	}

	.border-b {
		border-bottom: 1rpx solid #707070;
	}

		.signImg {
			height: 240rpx;
			width: 120rpx;
			position: absolute;
			right: 60rpx;
			transform: rotate(-90deg);
		}
</style>